<template>
  <div class="user">
    <UsersCenter v-show="token" />
    <div v-if="!token">
      <div class="userHead">
        <h2>车车易选</h2>
        <div class="userImg">
          <van-image width="100" height="100" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        </div>
      </div>
      <Login :loginOrregister="loginOrregister" @callbackToken="callbackToken" @callbackBool="callbackBool" />
      <div class="forgetOrregister">
        <p v-show="loginOrregister" @click="forgetPassword">忘记密码?</p>
        <a href="#" v-show="loginOrregister" @click="loginOregist(false)">没有账号?去注册
        </a>
        <a href="#" v-show="!loginOrregister" @click="loginOregist(true)">
          已有账号?去登录
        </a>
      </div>
    </div>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue";
import Login from "@/components/login.vue";
import { useRouter } from 'vue-router'
import { onMounted, reactive, toRefs } from "vue";
import { Toast } from 'vant'
import UsersCenter from "@/components/usersCenter.vue";
export default {
  name: "user_",
  setup() {
    const loginOregist = (arg) => {
      state.loginOrregister = arg;
    };
    const router = useRouter()
    const callbackToken = (arg) => {
      setTimeout(() => {
        state.token = arg;
        router.back(-1)
      }, 500);
    };
    const callbackBool = (arg) => {
      state.loginOrregister = arg;
    };
    const state = reactive({
      loginOrregister: true,
      token: localStorage.getItem(import.meta.env.VITE_APP_TOKEN),
    });
    const forgetPassword = () => {
      Toast.success('请联系开发者')
    }
    onMounted(() => { });
    return {
      ...toRefs(state),
      loginOregist,
      callbackToken,
      callbackBool,
      forgetPassword
    };
  },
  components: {
    Tabbar,
    Login,
    UsersCenter,
  },
};
</script>

<style lang="less" scoped>
.user {
  margin-bottom: 40px;
  height: 100vh;
}

.userHead {
  width: 100%;
  height: 200px;
  margin: 0 auto;
  padding: 50px 0;
  text-align: center;
}

.userImg {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.forgetOrregister {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin: 30px auto;

  p {
    margin: 0;
    color: #09a4f4;
  }
}
</style>